{% extends "common/layout.html" %}
{% block content %}
    <div class="row">


    </div>

    <div class="row">

        <div class="col-sm-8 col-sm-offset-2">

            <div class="col-sm-2 col-sm-offset-7">
                <select class="form-control " name="type">
                    {% if type %}
                        <option>{{ type }}</option>
                    {% endif %}
                    <option>姓名</option>
                    <option>公司</option>
                </select>
            </div>

            <div class="col-sm-3 " style="margin-bottom: 20px">
                <div class="input-group">
                    <input type="text" class="form-control" placeholder="输入搜索内容" name="search" value="{{ content }}">
                    <span class="input-group-btn" id="search">
        <button class="btn btn-default" type="button">搜索</button>
      </span>
                </div>
            </div>

            <table class="table table-bordered table-hover">
                <tr>
                    <th class="info">编号</th>
                    <th class="info">名称</th>
                    <th class="info">公司</th>
                    <th class="info">状态</th>
                    <th class="info">注册时间</th>
                    <th class="info">功能</th>
                </tr>
                {% for item in member %}
                    <tr>
                        <th>{{ item.id }}</th>
                        <th>{{ item.nickname }}</th>
                        <th>{{ item.company }}</th>
                        <th>{{ item.status }}</th>
                        <th>{{ item.created_time }}</th>

                        <th>

                            <button type="button" class="btn btn-primary" data-toggle="modal"
                                    data-target="#exampleModal" data-name="{{ item.nickname }}"
                                    data-company="{{ item.company }}"
                                    data-id="{{ item.id }}" data-title="编辑">编辑
                            </button>
                            <button class="btn btn-danger">删除</button>
                        </th>
                    </tr>

                {% endfor %}
            </table>
            <div>
                {% include "common/pagenation.html" %}
            </div>

        </div>
    </div>

    {#    模态框#}
    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="exampleModalLabel">新建存档</h4>
                </div>
                <div class="modal-body">

                    <form  style="margin-top: 10px">

                        <div class="form-group">
                            <label class="control-label">ID:</label>
                            <input type="text" class="form-control" id="id" name="id">
                        </div>

                        <div class="form-group">
                            <label class="control-label">姓名:</label>
                            <input type="text" class="form-control" id="name" name="name">
                        </div>

                        <div class="form-group">
                            <label class="control-label">公司:</label>
                            <select id="company" name="company" class="selectpicker form-control" title="请选择"
                                    data-hide-disabled="true"
                                    multiple>
                                <option>西北区域公司</option>
                                <option>太原公司</option>
                                <option>大同公司</option>
                                <option>临汾公司</option>
                                <option>长治公司</option>
                                <option>呼和浩特公司</option>
                                <option>包头公司</option>
                                <option>通辽公司</option>
                                <option>乌兰察布公司</option>
                                <option>西安公司</option>
                                <option>宝鸡公司</option>
                                <option>渭南公司</option>
                                <option>乌鲁木齐公司</option>
                                <option>兰州公司</option>
                            </select>
                        </div>


                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                            <button class="btn btn-primary do-updata" type="submit" name="updata" id="updata">更新人员信息
                            </button>
                        </div>
                    </form>
                </div>

            </div>
        </div>
    </div>

    {#赋值#}
    <script>
        $('#exampleModal').on('show.bs.modal', function (event) {
            var button = $(event.relatedTarget); // Button that triggered the modal

            var company = button.data('company').split(",");
            var title = button.data('title');
            var modal = $(this)
            modal.find('.modal-title').text(title + '人员');

            $("input[name=name]").val(button.data('name'));
            $("input[name=id]").val(button.data('id'));
            $("select[name=company]").selectpicker('val', company);
        });
    </script>

    {#搜索#}
    <script>
        $('#search').click(function () {
            let type = $("select[name='type']").val();
            let content = $("input[name='search']").val();
            location.href = "{{ buildUrl('/member/search') }}?content=" + content + "&type=" + type
        })
    </script>


    {#更新#}
    <script>
        $(".do-updata").click(function () {
            var btnaction = $(this);
            if (btnaction.hasClass("disable")) {
                common_ops.alert("还没提交上去了，别瞎点")
                return
            }


            var id = $("input[name=id]").val();
            var name = $("input[name=name]").val();
            var company = $("select[name=company]").val().toString();


            $.ajax({
                url: common_ops.buildUrl("/member/adminupdate"),
                type: "POST",
                data: {
                    name: name,
                    company: company,
                    id: id,
                },
                dataType: 'json',
                success: function (res) {
                    btnaction.removeClass("disabled");
                    var callback = null;
                    if (res.code == 200) {
                        callback = function () {

                        };
                    }
                    common_ops.alert(res.msg, callback);
                    setTimeout(function () {
                        $('#exampleModal').modal('hide');
                        $(".modal-backdrop.fade").hide();
                        window.location.href = common_ops.buildUrl("/member/admin");
                        $("#exampleModal").trigger("click");
                    }, 1000)
                }
            });

        });
    </script>


{% endblock %}


{% block js %}

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="{{ buildStaticUrl('/plugins/bootstrap-select/bootstrap-select.css') }}">

    <script src="{{ buildStaticUrl('/js/jquery1.11.3.js') }}"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="{{ buildStaticUrl('/plugins/bootstrap-select/bootstrap-select.js') }}"></script>

{% endblock %}

